import { useState } from "react";
import styles from "./index.module.less";
import { ConfigProvider } from "antd";
import useUrl from "@/hooks/useUrl";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import Loading from "@/components/Loading";
import { getLineDetail } from "@/api/modules/line";
import { useRequest } from "ahooks";
import { useEffect } from "react";
import AMap from "@/components/AMap";
import { Descriptions } from 'antd';
import { map, find } from 'lodash';
import { getAllOrgList } from "@/api/modules/dict";
import cs from 'classnames';
import { PageContainer } from '@ant-design/pro-layout';

export default () => {
	const { navigate, query } = useUrl();
	const detailId = query.get("detailId");
	const [detailInfo, setDetailInfo] = useState<any>({});
	const [loopPath, setLoopPath] = useState<any>([]); //环线点位列表
	const [loopMarker, setLoopMarker] = useState([]); //环线点位列表
	const [rectList, setRectList] = useState<any>([]); //场景范围列表

	const { data: orgList } = useRequest(() => getAllOrgList({ page: { pageNum: 1, pageSize: 100 }}));
	const { loading: loadingDetail, runAsync: getDetailAsync, data: walkDetailInfo } = useRequest(getLineDetail, { manual: true });

	useEffect(() => {
		if (!detailId) return;
		getDetailAsync({ id: detailId }).then((res: any) => {
			if (res?.code === RESULT_CODES.SUCCESS) {
				const data = res?.data ?? {};
				setRectList(map(data?.sceneList, (item: any) => {
					return {
						path: JSON.parse(item?.points)
					}
				}))
				setDetailInfo(data)
				const path: any = map(data?.siteList, (item: any) => {
					return item.lonLat?.split(',')
				})
				setLoopPath([{
					path
				}])
				setLoopMarker(map(data?.siteList, (item: any) => {
					const position = item.lonLat?.split(',')
					return { position: [position[0], position[1]] }
				}))
			}
		});
	}, []);

	return (
		<PageContainer
			title=" "
			breadcrumb={{
				routes: [
					{ href: '/line/list', breadcrumbName: '环线管理' },
					{ href: '', breadcrumbName: '环线详情' },
				],
			}}
		>
			<Loading isHeight100 loading={loadingDetail}>
				<div className={cs(styles.detailContainer, 'detailContainer')}>
					<div className={styles.container}>
						<div className={styles.content_wrap}>
							<div className={styles.content}>
								<div className={styles.moduleTitle}>基本信息</div>
								<Descriptions title="" column={1} labelStyle={{width: '100px'}}>
									<Descriptions.Item label="环线编号">{detailInfo?.id}</Descriptions.Item>
									<Descriptions.Item label="环线名称">{detailInfo?.loopName}</Descriptions.Item>
									<Descriptions.Item label="所属组织">{find(orgList?.data, (item: any) => item.id === detailInfo?.createOrgId)?.name || '-'}</Descriptions.Item>
									<Descriptions.Item label="关联月台">{detailInfo?.scNames}</Descriptions.Item>
									<Descriptions.Item label="接驳点总数">{detailInfo?.countSite}</Descriptions.Item>
									<Descriptions.Item label="起始站">{detailInfo?.startSiteName}</Descriptions.Item>
									{
										map(detailInfo?.siteList?.length > 2 ? detailInfo?.siteList?.slice(1, -1) : [], (item: any, index: number) => {
											return <Descriptions.Item label={`途径点${index + 1}`}>{item?.name}</Descriptions.Item>
										})
									}
									<Descriptions.Item label="终点站">{detailInfo?.endSiteName}</Descriptions.Item>
								</Descriptions>
							</div>
						</div>
					</div>
					<div className={styles.mapBox}>
						<div className={styles.moduleTitle}>地图预览</div>
						<div className={styles.mapOuter}>
							<AMap polylinePaths={loopPath} markers={loopMarker} polygons={rectList}/>
						</div>
					</div>
				</div>
			</Loading>
		</PageContainer>
	);
};
